<template>
  <div>
    <slide-verify
      ref="slideblock"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :slider-text="text"
      :accuracy="accuracy"
    ></slide-verify>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
import huashan from '@/assets/imags/huashan.jpg'
export default {
  name: 'App',
  data () {
    return {
      msg: '',
      text: '向右滑动->',
      isSucc: false,
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 3,
      imgArrays: [huashan]
    }
  },
  methods: {
    onSuccess (times) {
      this.msg = `验证成功, 耗时${(times / 1000).toFixed(1)}s`
      this.isSucc = !this.isSucc
      setTimeout(() => {
        this.$parent.$emit('update:visible', false)
      }, 1000)
    },
    onFail () {
      //   console.log("验证不通过");
      this.msg = ''
    },
    onRefresh () {
      //   console.log("点击了刷新小图标");
      this.isSucc = false
      this.msg = ''
    },
    onFulfilled () {
      this.isSucc = false
      //   console.log("刷新成功啦！");
    },
    onAgain () {
      this.isSucc = false
      //   console.log("检测到非人为操作的哦！");
      this.msg = 'try again'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick () {
      this.isSucc = false
      this.msg = ''
      this.$refs.slideblock.reset()
    }
  }
}
</script>
  <style scoped>
.slide-verify {
  left: 50%;
  top: 0;
  transform: translate(-50%);
}
</style>
